#define layout()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 这里的顺序不要改变，否则会出问题 -->
    #@layoutIncludeHtmlHeader()
    <!-- 初始化js -->
    #@layoutIncludeJsHeader()
    #@initIncludeJsHeader()
    <!-- 初始化css -->
    #@layoutIncludeCssHeader()
    #@css?()
    <!--自定义css-->
    #option("whimurmur_custom_css" ??)
    <!--自定义html-->
    #option("whimurmur_custom_head_html" ??)
    <!--自定义js-->
    #option("whimurmur_custom_head_js" ??)
    
    <link href="css/plugin/sidebarMenu.css" rel="stylesheet">
    <script src="js/plugin/sidebarMenu.js"></script>
</head>
<body>
<div id="loader" class="bg-loader">
<div class="l_main">
	<div class="l_square"><span></span><span></span><span></span></div>
	<div class="l_square"><span></span><span></span><span></span></div>
	<div class="l_square"><span></span><span></span><span></span></div>
	<div class="l_square"><span></span><span></span><span></span></div>
</div>
</div>
    <!--自定义js-->
    #option("whimurmur_custom_pre_js" ??)
    #@initIncludeJsBody()

<input type='text' id='inputCopyUse' class='inputCopyUse hidden'></input>
<input type='text' id='userId' value='#(USER.id ??)' class='hidden'></input>
<canvas id='captureCanvas' class='hidden'></canvas>
<div class="cl-header container-fluid bg-light">
    <div class="header-content container">
        <nav class="navbar navbar-expand-md navbar-offcanvas">
            <a class="navbar-brand" href="/">
                <img src="#option('whimurmur_logo','/templates/whimurmur/img/logo.jpg')" width="144" alt="">
            </a>
            <!--<button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>-->
            <button class="navbar-toggler-custom navbar-icon" type="button" data-toggle="collapse" data-target="#menu" 
                title="菜单" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
	            <span class="icon-bar bar1"></span>
	            <span class="icon-bar bar2"></span>
	            <span class="icon-bar bar3"></span>
	        </button>
            <div class="collapse navbar-collapse justify-content-end ml-auto" id="menu">
                <ul class="navbar-nav navbar-top closeFloat">
                    
                    #set(menuColor={})
                    #if(option("whimurmur_menu_highlight"))
                        #for(opt: linesOption("whimurmur_menu_highlight", '\|'))
                            #set(menuColor[opt[0]] = opt[1])
                        #end
                    #end
                    
                    #for(menu : MENUS)
                    <li data-menu="#(menu.text ??) >" class='nav-item'>
                        <a class='nav-link #(menu.isActive ? "active" : "")' href="#(menu.url == null ? 'javascript:;':menu.url)" #(menuColor[menu.text] ? "style='color: " + menuColor[menu.text] + "'" : "") target="#(menu.target ??)"><i data-icon="#(menu.icon ??)" class="fa fa-#(menu.icon ??) fa-fw"></i>&nbsp;<span>#(menu.text ??)</span></a>
                        #if(menu.hasChild())
                            <ul class='bg-light border-primary'>
                                #for(childMenu1 : menu.getChilds())
                                    <li data-menu="#(childMenu1.text ??) >" class='nav-item'>
                                        <a class='nav-link text-primary' #(childMenu1.isActive && menuColor[menu.text]? "style='color: " + menuColor[menu.text] + " !important'" : "") href="#(childMenu1.hasChild() || childMenu1.url == null ? 'javascript:;':childMenu1.url)" target="#(childMenu1.target ??)"><i data-icon="#(childMenu1.icon ??)" class="fa fa-#(childMenu1.icon ??) fa-fw"></i>&nbsp;<span>#(childMenu1.text ??)#(childMenu1.hasChild() ? " >" : "")</span></a>
                                        #if(childMenu1.hasChild())
                                        <ul class='bg-light border-primary'>
                                            #for(childMenu2 : childMenu1.getChilds())
                                                <li data-menu="#(childMenu2.text ??) >" class='nav-item'>
                                                    <a class='nav-link text-primary' #(childMenu2.isActive && menuColor[menu.text]? "style='color: " + menuColor[menu.text] + " !important'" : "") href="#(childMenu2.hasChild() || childMenu2.url == null ? 'javascript:;':childMenu2.url)" target="#(childMenu2.target ??)"><i data-icon="#(childMenu2.icon ??)" class="fa fa-#(childMenu2.icon ??) fa-fw"></i>&nbsp;<span>#(childMenu2.text ??)#(childMenu2.hasChild() ? " >" : "")</span></a>
                                                    #if(childMenu2.hasChild())
                                                    <ul class='bg-light border-primary'>
                                                        #for(childMenu3 : childMenu2.getChilds())
                                                            <li data-menu="#(childMenu3.text ??) >" class='nav-item'>
                                                                <a class='nav-link text-primary' #(childMenu3.isActive && menuColor[menu.text]? "style='color: " + menuColor[menu.text] + " !important'" : "") href="#(childMenu3.hasChild() || childMenu3.url == null ? 'javascript:;':childMenu3.url)" target="#(childMenu3.target ??)"><i data-icon="#(childMenu3.icon ??)" class="fa fa-#(childMenu3.icon ??) fa-fw"></i>&nbsp;<span>#(childMenu3.text ??)#(childMenu3.hasChild() ? " >" : "")</span></a>
                                                                #if(childMenu3.hasChild())
                                                                <ul class='bg-light border-primary'>
                                                                    #for(childMenu4 : childMenu3.getChilds())
                                                                        <li data-menu="#(childMenu4.text ??) >" class='nav-item'>
                                                                            <a class='nav-link text-primary' #(childMenu4.isActive && menuColor[menu.text]? "style='color: " + menuColor[menu.text] + " !important'" : "") href="#(childMenu4.hasChild() || childMenu4.url == null ? 'javascript:;':childMenu4.url)" target="#(childMenu4.target ??)"><i data-icon="#(childMenu4.icon ??)" class="fa fa-#(childMenu4.icon ??) fa-fw"></i>&nbsp;<span>#(childMenu4.text ??)</span></a>
                                                                        </li>
                                                                    #end
                                                                </ul>
                                                                #end
                                                            </li>    
                                                        #end
                                                    </ul>
                                                    #end
                                                </li>
                                            #end
                                        </ul>
                                        #end
                                    </li>
                                #end
                            </ul>
                        #end
                    </li>
                    #end
                </ul>
            </div>
        </nav>
    </div>
</div>

<div class="cl-cantainer container">
    <div class="row">
        #if(option("whimurmur_page_top_ad" ??))
        <div class="col-md-12 col-lg-12 col-xl-12">
            <div class="index-top-ad bg-light" id="index-top-ad">
                <!--<div class="content-ad-title">广告位-动动手帮助网站活下去</div>-->
                <div class="index-top-ad-main pb-3">
                    <div id="index-top-ad-content" class="m-1 ad-content">
                        #option("whimurmur_page_top_ad" ??)
                    </div>
                </div>
            </div>
        </div>
        #end
        
        #@content()

    </div>
</div>

<div id="footer" class="container-fluid cl-footer bg-light">
    <div class="container">
        <div class="">
            #if(option("whimurmur_footer_img" ??))
                #set(rand=java.lang.Math::random())
                <div id="footImg">
                #for(imgOpts: linesOption("whimurmur_footer_img", '\|'))
                        #if(rand >= for.index * 1.0 / for.size && rand < for.count * 1.0 / for.size)
                        <a class="footer-img-a navbar-brand footer-img"  href="##" onclick="footerSlideWord(event, #(for.size))" data-index="#(for.index)"
                            data-title="#(imgOpts.size() > 1 ? imgOpts[1] : '')" data-url="#(imgOpts.size() > 2 ? imgOpts[2] : '')">
                            <img src="#(imgOpts[0])" class="img-fluid footer-img-img" alt="页脚图片">
                        </a>
                        #else
                        <a class="footer-img-a-hidden navbar-brand footer-img"  href="##" onclick="footerSlideWord(event, #(for.size))" data-index="#(for.index)"
                            data-title="#(imgOpts.size() > 1 ? imgOpts[1] : '')" data-url="#(imgOpts.size() > 2 ? imgOpts[2] : '')">
                            <img src="#(imgOpts[0])" class="img-fluid footer-img-img" alt="页脚图片">
                        </a>
                        #end
                #end
                </div>
            #end
            
            <span class="footer-declare td-n">#(WEB_COPYRIGHT ? WEB_COPYRIGHT : 'designed by whisper(轻语) powered by jpress copyright @ 2020~2020 
            <a title="whimurmur最新版" id="whimurmur_version" href="/article/whimurmurUpdated">whimurmur(v' + (T_VERSION) + ')</a>&nbsp;
                <a title="jpress官网" id="jpress_version" href="http://www.jpress.io">jpress(' + (JPRESS_VERSION) + ')</a>')&nbsp;&nbsp;#(WEB_IPC_NO ? '<a href="http://beian.miit.gov.cn">' + WEB_IPC_NO + '</a>' : '')
    		</span>
    	</div>
    	
    	#if(linesOption('whimurmur_friendly_link') && linesOption('whimurmur_friendly_link').size() > 0)
    	<div class="footer-friendly-link">
    	    <div><span class="footer-friendly-link-title text-secondary">友情链接</span>#if(option('whimurmur_friendly_link_text'))<span class="friendly-link-seperate"> | </span><span class="footer-friendly-link-text text-secondary">#option('whimurmur_friendly_link_text')</span>#end</div>
    	    <div>
    	        #for(friendlyLink : linesOption('whimurmur_friendly_link','\|'))
    	            <span class="friendly-link-site"><a href="#(friendlyLink[1])" target="_blank">#(friendlyLink[0])</a></span>
    	        #end
    	    </div>
    	</div>
    	#end
    
        <div id="appendix">
            <div id="function-button">
                <div id="function-more"><a data-toggle="tooltip" title="更多功能"><img src="img/icon/more.png" /></a></div>
                <div id="function-button-more" class="clearfix function-button-more-hidden">
                    <div>
                        #if(article)
                        <div id="articleAppendix">
                            <div id="share">
                                <a class="function-button" title="分享" data-toggle="tooltip"><img alt="" id="articleShareImg" src="img/icon/share.png" /></a>
                                <div id="shareDiv" class="hidden px-2 py-1" tabindex="9999">
                                    <div class="pb-1">
                                        <a target="_blank" href="http://shuo.douban.com/!service/share?href=#(C.request.scheme)://#(C.request.serverName)/#(java.net.URLEncoder::encode(article.url, 'utf-8'))&name=#(article.title)&text=#maxLength(article.text,120)&starid=0&aid=0&style=11"><img alt="duoban" src="img/icon/douban.png" /></a>
                                        <a target="_blank" href="https://service.weibo.com/share/share.php?url=#(C.request.scheme)://#(C.request.serverName)/#(java.net.URLEncoder::encode(article.url, 'utf-8'))&title=#(article.title)"><img alt="weibo" src="img/icon/weibo.png" /></a>
                                        <a target="_blank" href="http://www.linkedin.com/shareArticle?url=#(C.request.scheme)://#(C.request.serverName)/#(java.net.URLEncoder::encode(article.url, 'utf-8'))&title=#(article.title)&summary=#maxLength(article.text,120)&mini=true&ro=true&armin=armin"><img alt="linkin" src="img/icon/linkedin.png" /></a>
                                        <a target="_blank" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=#(C.request.scheme)://#(C.request.serverName)/#(java.net.URLEncoder::encode(article.url, 'utf-8'))&title=#(article.title)&summary=#maxLength(article.text,120)"><img alt="qzone" src="img/icon/tencent_qzone.png" /></a>
                                    </div>
                                    <div>
                                        <div id="wechatShareQr"></div>
                                        <div class="text-center">扫一下手机上看</div>
                                    </div>
                                    
                                </div>
                            </div>
                            <div id="quickAccess">
                                <a id="quickSupport" class="pointer function-button" title="支持文章/作者" data-toggle="tooltip"><img alt="" src="img/icon/good.png" /></a>
                                <a id="quickComment" class="pointer function-button" title="评论文章" data-toggle="tooltip"><img src="img/icon/comment.png" /></a>
                            </div>
                            <div id="articlePrePost">
                                <a id="articlePost" #nextArticle(hiddenFlag=true) href="#(next.url)" title="#(next.title)" class="pointer function-button" #end class="not-allowed function-button" title="没有了" data-toggle="tooltip"><img alt="" src="img/icon/right_arrow2.png" /></a>
                                <a id="articlePre" #previousArticle(hiddenFlag=true) href="#(previous.url)" title="#(previous.title)" class="pointer function-button" #end class="not-allowed function-button" title="没有了" data-toggle="tooltip"><img src="img/icon/left_arrow2.png" /></a>
                            </div>
                            <div id="articlePicture">
                                <a id="articleCapture"  title="保存文章为PNG图片" class="pointer function-button" data-toggle="tooltip">
                                        <img src="img/icon/png_download.png" />
                                    </a>
                            </div>
                            <div id="articlePDF"><!-- 手动分页，会从文字中间分，不可行，ctrl+P可以分页（chrome)-->
                                <a id="articlePDFCapture"  title="保存文章为PDF文件" class="pointer function-button" data-toggle="tooltip">
                                        <img src="img/icon/pdf_download.png" />
                                    </a>
                            </div>
                        </div>
                        #end
                    </div>
                    <div>
                        #if(product)
                        <div id="productAppendix">
                            <div id="share">
                                <a class="function-button" title="分享" data-toggle="tooltip"><img alt="" id="articleShareImg" src="img/icon/share.png" /></a>
                                <div id="shareDiv" class="hidden px-2 py-1" tabindex="9999">
                                    <div class="pb-1">
                                        <a target="_blank" href="http://shuo.douban.com/!service/share?href=#(C.request.scheme)://#(C.request.serverName)/#(java.net.URLEncoder::encode(product.url, 'utf-8'))&name=#(product.title)&text=#maxLength(product.text,120)&starid=0&aid=0&style=11"><img alt="duoban" src="img/icon/douban.png" /></a>
                                        <a target="_blank" href="https://service.weibo.com/share/share.php?url=#(C.request.scheme)://#(C.request.serverName)/#(java.net.URLEncoder::encode(product.url, 'utf-8'))&title=#(product.title)"><img alt="weibo" src="img/icon/weibo.png" /></a>
                                        <a target="_blank" href="http://www.linkedin.com/shareArticle?url=#(C.request.scheme)://#(C.request.serverName)/#(java.net.URLEncoder::encode(product.url, 'utf-8'))&title=#(product.title)&summary=#maxLength(product.text,120)&mini=true&ro=true&armin=armin"><img alt="linkin" src="img/icon/linkedin.png" /></a>
                                        <a target="_blank" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=#(C.request.scheme)://#(C.request.serverName)/#(java.net.URLEncoder::encode(product.url, 'utf-8'))&title=#(product.title)&summary=#maxLength(product.text,120)"><img alt="qzone" src="img/icon/tencent_qzone.png" /></a>
                                    </div>
                                    <div>
                                        <div id="wechatShareQr"></div>
                                        <div class="text-center">扫码分享到微信</div>
                                    </div>
                                    
                                </div>
                            </div>
                            <div id="productPrePost">
                                <a id="productPost" #nextProduct() href="#(next.url)" title="#(next.title)" class="pointer function-button" #end class="not-allowed function-button" title="没有了" data-toggle="tooltip"><img alt="" src="img/icon/right_arrow2.png" /></a>
                                <a id="productPre" #previousProduct() href="#(previous.url)" title="#(previous.title)" class="pointer function-button" #end class="not-allowed function-button" title="没有了" data-toggle="tooltip"><img src="img/icon/left_arrow2.png" /></a>
                            </div>
                        </div>
                        #end
                        <div id="rightBarAppendix">
                            <div id="searchAppendix">
                                <a id="searchPageAppendix" class="function-button" title="页内搜索" data-toggle="tooltip"><img alt="" id="searchPageAppImg" src="img/icon/location.png" /></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="theme-lens">
                <a data-toggle="tooltip" title="改变主题"><img src="img/icon/color_chooser.png" /></a>
            </div>
            <div id="theme" class='theme-hidden bg-light noSel'>
                <div id="theme-settings" class="clearfix">
                    <div>
                        <span id='base' class="theme" data-toggle="tooltip" title="基础主题"></span>
                        <span id='blue_sky' class="theme" data-toggle="tooltip" title="蓝色天空主题"></span>
                        <span id='crisp' class="theme" data-toggle="tooltip" title="艳丽主题"></span>
                        <span id='darkly' class="theme" data-toggle="tooltip" title="深色主题"></span>
                        <span id='grey' class="theme" data-toggle="tooltip" title="灰色主题"></span>
                        <span id='light_shadow' class="theme" data-toggle="tooltip" title="浅色主题"></span>
                    </div>
                    <div>
                        <span id='modern' class="theme" data-toggle="tooltip" title="现代主题"></span>
                        <span id='orange' class="theme" data-toggle="tooltip" title="橘色主题"></span>
                        <span id='purple' class="theme" data-toggle="tooltip" title="紫色主题"></span>
                        <span id='square' class="theme" data-toggle="tooltip" title="方正主题"></span>
                        <span id='warm' class="theme" data-toggle="tooltip" title="春意主题"></span>
                        <span id='dark_blue' class="theme" data-toggle="tooltip" title="深蓝主题"></span>
                    </div>
                </div>
                <div id='font-settings' class='clearfix'></div>
            </div>
            <div id="top"><a data-toggle="tooltip" title="回顶部"><img src="img/icon/up_arrow.png" /></a></div>
            <div id="down"><a data-toggle="tooltip" title="到底部"><img src="img/icon/down_arrow.png" /></a></div>
            <div id="moveTo">
                <a data-toggle="tooltip" title="当前双击标记处" id="moveCur"><img src="img/icon/letter_o.png" /></a>
                <a id="movePost" data-toggle="tooltip" title="更早的标记"><img alt="当前双击处" src="img/icon/left_arrow.png" /></a>
                <a id="movePre" data-toggle="tooltip" title="较近的标记"><img src="img/icon/right_arrow.png" /></a>
            </div>
        </div>
    
    </div>
</div>
<div id="bin"></div>
<div id='popCode' class='hidden'></div>

<!--自定义html-->
#option("whimurmur_custom_body_html" ??)
#@layoutIncludeJsBody()
#@script?()
<!--自定义js-->
#option("whimurmur_custom_after_js" ??)
#@layoutIncludeCssBody()
</body>
</html>
#end